<template>
  <div class="my-tankuang" >
    <el-button type="text" @click="dialogVisible = true">预约挂号</el-button>

    <el-dialog  :visible.sync="dialogVisible" width="600px" :before-close="handleClose" >
      <h3 class="my-h3" slot="title">预约挂号</h3>
      <div id="main">
          <p>说明：请预约今天和以后的日期，当天的预约不支持退款，如需退款请趁早决定哦（今天的预约不支持退款，请慎重）</p>
          <div class="div-foot">
              <img class="my-img" src="@/assets/imgs/zj.jpg" alt="">
              <div class="div-r">
                <ul>
                  <li>看诊医生:{{doctor.name}} 女 副主任医师 {{doctor.edubackground}}</li>
                  <li>挂号科室：{{doctor.department}}</li>
                  <li>挂号费用：{{doctor.fee}}￥还包邮</li>
                  <li>预约日期：年 /月 /日</li>
                </ul>
              </div>
          </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消预约</el-button>
        <el-button type="primary" @click="dialogVisible = false">立即预约</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
 export default {
    props:{
      doctor:{}
    },
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
       timeFormat(date) {
        var y = date.getFullYear(); //年
        var m = date.getMonth() + 1; //月
        var d = date.getDate(); //日
        if (m < 10) {
            m = "0" + m;
        }
        if (d < 10) {
            d = "0" + d;
        }
        return y + "-" + m + "-" + d;
    }
    }
  };
</script>

<style>
.el-dialog{
  border-radius: 30px;
}
.div-foot{
  display: flex;

}
.div-foot ul li{
  list-style: none;
  line-height: 40px;
  font-size: 18px;
}
.my-img{
    width: 120px;
    height: 170px;
}
#main{
    padding:0 20px;
    border-top: 1px dashed gray;
    border-bottom: 1px dashed gray;
}
.el-dialog__body{
    padding-top: 0;
}
.my-h3 {
    color:gray;
    text-align: center;
    width: 100%;
}
.el-dialog__header{
    padding-top:1px;
}
</style>